let indexModule = (function () {
    let $baseBox = $('.baseBox'),
        $baseBoxText = $baseBox.find('span'),
        $baseBoxSingout = $baseBox.find('a'),
        $menuBox = $('.menuBox'),
        $navBox = $('.navBox'),
        $navBoxList = $navBox.find('a'),
        $itemBoxList = null,
        $iframeBox = $('.iframeBox')
    // 基于发布订阅管理 我们获取到个人信息和权限信息后要处理的事情  直接用jQuery做
    let $plan = $.Callbacks();

    // 显示基本信息  和 退出登录
    $plan.add((_, baseInfo) => {
        $baseBoxText.html(`您好，${baseInfo.name || ''}`)
        $baseBoxSingout.click(async () => {
            let result = await axios.get('user/signout')
            if (result.code == 0) {
                //清除缓存
                localStorage.clear()
                window.location.href = 'login.html'
                return
            }
            alert('亲，退出没成功，可能网络有问题，请稍后再试试~~')
        })
    })

    // 权限处理 控制左侧menu的渲染
    $plan.add(power => {
        let str = ``
        if (power.includes('userhandle')) {
            str +=`<div class="itemBox" text="员工管理">
                <h3>
                    <i class="iconfont icon-yuangong"></i>
                    员工管理
                </h3>
                <nav class="item">
                    <a href="page/userlist.html" target="iframeBox">员工列表</a>
                    <a href="page/useradd.html" target="iframeBox">新增员工</a>
                </nav>
            </div>`
        } 
        if (power.includes('departhandle')) {
            str +=`<div class="itemBox" text="部门管理">
                <h3>
                    <i class="iconfont icon-guanliyuan"></i>
                    部门管理
                </h3>
                <nav class="item">
                    <a href="page/departmentlist.html" target="iframeBox">部门列表</a>
                    <a href="page/departmentadd.html" target="iframeBox">新增部门</a>
                </nav>
            </div>`
        }
        if (power.includes('jobhandle')) {
            str+=`<div class="itemBox" text="职务管理">
                <h3>
                    <i class="iconfont icon-zhiwuguanli"></i>
                    职务管理
                </h3>
                <nav class="item">
                    <a href="page/joblist.html" target="iframeBox">职务列表</a>
                    <a href="page/jobadd.html" target="iframeBox">新增职务</a>
                </nav>
            </div>`
        }
        if (power.includes('customer')) {
            str+=`<div class="itemBox" text="客户管理">
                <h3>
                    <i class="iconfont icon-kehuguanli"></i>
                    客户管理
                </h3>
                <nav class="item">
                    <a href="page/customerlist.html?lx=my" target="iframeBox">我的客户</a>
                    ${power.includes('customerall')?`<a href="page/customerlist.html?lx=all" target="iframeBox">全部客户</a>`:``}
                    <a href="page/customeradd.html" target="iframeBox">新增客户</a>
                </nav>
            </div>`
        }
        $menuBox.html(str)
        $itemBoxList = $menuBox.find('.itemBox')
    })

    // 控制组织结构和客户管理
    function handleGroup(initialIndex) {
        // 先把itembox分组
        let $group1 = $itemBoxList.filter((_,item) => { 
            let text = $(item).attr('text')
            return text === "客户管理"
        })
        let $group2 = $itemBoxList.filter((_,item) => { 
            let text = $(item).attr('text')
            return /^(员工管理|部门管理|职务管理)$/.test(text)
        })  
        if (initialIndex === 0) {
            $group1.show()
            $group2.hide()
        }
        if (initialIndex === 1) {
            $group2.show()
            $group1.hide()
        }
    }
    $plan.add(power => { 
        // 控制默认显示哪一个
        let initialIndex = power.includes('customer')?0:1  
        $navBoxList.eq(initialIndex).addClass('active').siblings().removeClass('active')

        handleGroup(initialIndex)

        //点击控制切换
        $navBoxList.click(function () {
            let $this = $(this)
            let index = $this.index()
            let text = $this.html().trim()
            // 权限校验 
            if (!(text === '客户管理' && /customer/.test(power)) && !(text === '组织结构' && /(userhandle|departhandle|jobhandle)/.test(power))) {
                alert('亲，您无权限访问改操作，请联系系统管理员~~')
                return
            }

            if(index===initialIndex) return
            $(this).addClass('active')
            $navBoxList.eq(initialIndex).removeClass('active')
            initialIndex = index
            handleGroup(initialIndex) 
        })

    })

    $plan.add(power => {
        let url = 'page/customerlist.html?lx=my'
        if (!power.includes('customer')) {
            url = 'page/userlist.html'
        }
        $iframeBox.attr('src',url)
    })

    return {
        async init() {
            //验证当前用户是否登录
            let result = await axios.get('/user/login')
            if (result.code != 0) {
                // 未登录
                alert('亲，您还没有登录哦，请您先登录~~')
                window.location.href = "login.html";
                return
            }

            // 获取登录用户的权限信息和个人信息
            let [power,baseInfo] =await axios.all([
                axios.get('user/power',{}),
                axios.get('user/info'), 
            ])
            power.code == 0 ? power = power.power : null
            baseInfo.code == 0 ? baseInfo = baseInfo.data : null
            
            // 这部分的权限信息和个人信息 可以存储到localstorage中。（Vuex 和 redux更安全，可以防止用户修改）设定时间内刷新是刷新本地的。不读取服务器
            // 退出登录，重新登录删除数据更新数据。

            // 发布订阅  ---这里只要通知执行即可
            $plan.fire(power, baseInfo) 
        }
    }
})()

indexModule.init()